<template>
  <!-- 导航栏组件 -->
  <div class="nav">
  	<!-- 顶部 -->
  	<div class="nav-top" >
  		<div id="nav-top-left">
  			<ul>
  				<li><a href="/index">小米商城</a></li>
  				<li><a href="">MIUI</a></li>
  				<li><a href="">IoT</a></li>
  				<li><a href="">云服务</a></li>
  				<li><a href="">天星科技</a></li>
  				<li><a href="">有品</a></li>
  				<li><a href="">小爱开放平台</a></li>
  				<li><a href="">企业团购</a></li>
  				<li><a href="">资质证照</a></li>
  				<li><a href="">协议规则</a></li>
  				<li><a href="download.html">下载app</a></li>
  				<li><a href="">Select Location</a></li>
  			</ul>
  		</div>
  		<div id="nav-top-right" >
  			<ul>
  				<li id="nav-top-right-li" onmouseover="shopping()" @mouseover="shoppingcar()"><a href=""><span
  							class="iconfont icon-gouwuche" ></span>购物车<span
  							id="nav-top-right-shopping"></span></a></li>
  				<li><a href="" >消息通知</a></li>
  				<li><a href="/login" v-if="! islogin">登录</a></li>
          <li v-if="islogin">
           <el-dropdown>
             <span class="el-dropdown-link">
               {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
               <a href="/root"><el-dropdown-item v-if="role == 2">进入后台</el-dropdown-item></a>
               <el-dropdown-item>个人主页</el-dropdown-item>
               <el-dropdown-item @click.native="exit()">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
          </li>
  			</ul>
  		</div>
  		<div id="nav-top-right-sp" style="display: none;" onmouseout="outshopping()" onmouseover="shopping()" >
  			<p v-show="spcar.length == 0">购物车中还没有商品，赶紧选购吧!</p>
        <div v-show="spcar.length > 0">
          <ul v-for="(sp,id) in spcar " :key="id">
            <li class="sp-li">
              <img :src="sp.img" style="width: 60px; height: 60px;"  />
              <span class="sp-li-span">{{sp.name}}</span>
              <span class="sp-li-span1">{{sp.price}}元</span>
              <button class="sp-li-button"  :id="sp.id" @click="spmove">移除商品</button>
              <span class="sp-li-span2">商品数量:{{sp.sum}}</span>
              </li>
          </ul>
          <span class="sp-price">总价:  {{settleprice}}元</span>
          <a href="/settle"><button class="sp-settle">结算</button></a>
        </div>
  		</div>
  	</div>
    <remote-js></remote-js>
  </div>
</template>

<script>
  export default{
    name:"navigation", //导出的名字
     data() {
          return {
            username:'',
            role:0,
            islogin:false, //登录状态判断
            spcar:[],
            settleprice:0
          };
        },
        methods: {
          exit(){
            sessionStorage.removeItem('user')
            sessionStorage.removeItem('spcar')
            sessionStorage.setItem('islogin',false)
            this.$store.dispatch('setislogin',sessionStorage.getItem('islogin'))
            this.$router.go(0)
          },
          //购物车获取商品信息
          shoppingcar(){
			this.spcar = JSON.parse(sessionStorage.getItem('spcar'))
			//对购物车商品名称过长进行处理
			for(var i = 0;i<this.spcar.length;i++){
				if(this.spcar[i].name.length > 12){
					this.spcar[i].name = this.spcar[i].name.slice(0,12)+"..."
				}
			}	
            //计算价格
            if(this.spcar.length >0){
              var a = 0
              for(var i = 0;i<this.spcar.length;i++){
                a += this.spcar[i].price * this.spcar[i].sum
              }
              this.settleprice = a
            }
          },
          //购物车移除商品
          spmove(e){
            var a = e.target.id
            var spcar1 = JSON.parse(sessionStorage.getItem('spcar')) //获取session对象
            if(spcar1.length >0 && spcar1 != null){
              for(var i = 0;i < spcar1.length;i++){
                if(a == spcar1[i].id){ 
                  //数量大于1时
                  if(spcar1[i].sum > 1){
                    this.spcar[i].sum = this.spcar[i].sum - 1
                    //计算价格
                    var a = 0
                    for(var i = 0;i<this.spcar.length;i++){
                       a += this.spcar[i].price * this.spcar[i].sum
                    }
                    this.settleprice = a
                    sessionStorage.setItem('spcar',JSON.stringify(this.spcar))
                  }else{
                    //删除商品
                    for(var j = 0;j<spcar1.length;j++){
                      if(a == spcar1[j].id){
                        this.$delete(this.spcar, i)
                        //计算价格
                        var a = 0
                        for(var i = 0;i<this.spcar.length;i++){
                           a += this.spcar[i].price * this.spcar[i].sum
                        }
                        this.settleprice = a
                        sessionStorage.setItem('spcar',JSON.stringify(this.spcar))
                      }
                    }
                  }
                }
              }
            }
          }
        },
        mounted() { //首次登录加载数据
          if(sessionStorage.getItem('user') != null ){
            this.$store.dispatch('setuser',JSON.stringify(sessionStorage.getItem('user')))
            this.$store.dispatch('setislogin',sessionStorage.getItem('islogin'))
            this.username = JSON.parse(sessionStorage.getItem('user')).name
            this.role = JSON.parse(sessionStorage.getItem('user')).role
            this.islogin = this.$store.state.islogin
          }else{
            if(JSON.parse(sessionStorage.getItem('user')) != null){
               this.username = JSON.parse(sessionStorage.getItem('user')).name
            }
            this.islogin = this.$store.state.islogin
          }
        },
        components: {
          'remote-js': {
           render(createElement) {
            return createElement(
             'script',
             {
              attrs: {
               type: 'text/javascript',
               src: '../../static/js/navigation.js',
              },
             },
            );
           },
          },
         },
  }
</script>
<style scoped>
  @import url("../../static/css/navigation.css");
  .el-dropdown-link {
      cursor: pointer;
      color: #FF6700 ;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
</style>
